<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue 父子组件间的传值</title>

    <script src="vue.js"></script>
</head>
<body>
    <div id="practice">
        <father></father>
    </div>
    
    <script>
        // 父组件传值给子组件
        // Vue.component('father', {
        //     template: "<div>我是爸爸，我的儿子叫{{mySonName}}<son :myName='mySonName'></son></div>",
        //     data() {
        //         return {
        //             mySonName: 'Bob'
        //         }
        //     },
        //     components: {
        //         'son': {
        //             props: ['myName'],
        //             template: "<div>我是儿子,我爸爸给我取名叫{{myName}}</div>"
        //         }
        //     }
        // })

        // 子组件传值给父组件
        // Vue.component('father', {
        //     template: "<div>我是爸爸，我的儿子叫{{mySonName}}<son @tellName='getSonName'></son></div>",
        //     data() {
        //         return {
        //             mySonName: '?????'
        //         }
        //     },
        //     methods: {
        //         getSonName(data) {
        //             this.mySonName = data
        //         }
        //     },
        //     components: {
        //         'son': {
        //             template: "<button @click='tellToFather'>我是儿子,我爸爸给我取名叫{{myName}}</button>",
        //             data() {
        //                 return {
        //                     myName: 'Bob'
        //                 }
        //             },
        //             methods: {
        //                 tellToFather() {
        //                     this.$emit('tellName',this.myName)
        //                 },
        //             }
        //         }
        //     }
        // })

         // 兄弟组件间的传值
         var eventBus = new Vue()
         Vue.component('father', {
            template: `<div>
                        <son></son>
                        <daughter></daughter>
                      </div>`,
            components: {
                'son': {
                    template: "<div>我是哥哥,我妹妹叫叫{{mySisterName}}</div>",
                    data() {
                        return {
                            mySisterName: '????'
                        }
                    },
                    mounted() {
                        eventBus.$on('tellName', data=>{
                            this.mySisterName = data
                        })
                    },
                },
                'daughter': {
                    template: "<button @click='tellToBrother'>我是妹妹,告诉哥哥我叫{{myName}}</button>",
                    data() {
                        return {
                            myName: 'Luna'
                        }
                    },
                    methods: {
                        tellToBrother() {
                            eventBus.$emit('tellName',this.myName)
                        },
                    }
                },
            }
        })

        new Vue({
            el: '#practice' 
        })

        
    
    </script>
</body>
</html>